<template>
  <div class="expense-reimbursement-container">
    <div class="reimbursement-panel">
      <div class="panel-header">
        <div class="panel-title">
          <el-icon><Money /></el-icon>
          <span>参保人员费用报销</span>
        </div>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
      
      <div class="basic-info-section">
        <div class="info-row">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ participantInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ participantInfo.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">住院号：</span>
            <span class="value">{{ participantInfo.hospitalNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">总费用：</span>
            <span class="value highlight">{{ formatCurrency(participantInfo.totalExpense) }}</span>
          </div>
        </div>
      </div>
      
      <div class="expense-categories">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="category-card">
              <div class="category-header">
                <span class="category-icon">💊</span>
                <span class="category-title">药品费用</span>
              </div>
              <div class="category-amount">{{ formatCurrency(expenseData.drugTotal) }}</div>
              <div class="category-detail">
                <span>报销比例: {{ expenseData.drugRatio }}%</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="category-card">
              <div class="category-header">
                <span class="category-icon">🩺</span>
                <span class="category-title">诊疗费用</span>
              </div>
              <div class="category-amount">{{ formatCurrency(expenseData.treatmentTotal) }}</div>
              <div class="category-detail">
                <span>报销比例: {{ expenseData.treatmentRatio }}%</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="category-card">
              <div class="category-header">
                <span class="category-icon">🏥</span>
                <span class="category-title">服务费用</span>
              </div>
              <div class="category-amount">{{ formatCurrency(expenseData.serviceTotal) }}</div>
              <div class="category-detail">
                <span>报销比例: {{ expenseData.serviceRatio }}%</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="category-card">
              <div class="category-header">
                <span class="category-icon">📋</span>
                <span class="category-title">其他费用</span>
              </div>
              <div class="category-amount">{{ formatCurrency(expenseData.otherTotal) }}</div>
              <div class="category-detail">
                <span>报销比例: {{ expenseData.otherRatio }}%</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <div class="expense-detail-section">
        <div class="section-header">
          <h3>费用明细表</h3>
        </div>
        
        <el-table :data="expenseDetails" stripe border>
          <el-table-column prop="category" label="费用类别" width="120" />
          <el-table-column prop="name" label="项目名称" min-width="150" />
          <el-table-column prop="price" label="单价" width="100">
            <template #default="scope">
              {{ formatCurrency(scope.row.price) }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="amount" label="金额" width="120">
            <template #default="scope">
              {{ formatCurrency(scope.row.amount) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="reimbursement-section">
        <div class="section-header">
          <h3>报销信息</h3>
        </div>
        
        <el-table :data="reimbursementInfo" stripe border>
          <el-table-column prop="level" label="级别" width="100" />
          <el-table-column prop="limit" label="限额" width="120">
            <template #default="scope">
              {{ formatCurrency(scope.row.limit) }}
            </template>
          </el-table-column>
          <el-table-column prop="deductible" label="起付线" width="120">
            <template #default="scope">
              {{ formatCurrency(scope.row.deductible) }}
            </template>
          </el-table-column>
          <el-table-column prop="reimbursementRatio" label="报销比例" width="120">
            <template #default="scope">
              {{ scope.row.reimbursementRatio }}%
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="handleApplyReimbursement(scope.row)"
              >
                报销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="summary-section">
        <div class="summary-row">
          <span class="summary-label">报销金额：</span>
          <span class="summary-value">{{ formatCurrency(calculatedReimbursement) }}</span>
        </div>
        <div class="summary-row">
          <span class="summary-label">自付金额：</span>
          <span class="summary-value">{{ formatCurrency(participantInfo.totalExpense - calculatedReimbursement) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Money } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const route = useRoute();
const participantId = route.params.id;

// 参保人员基本信息
const participantInfo = ref({
  id: participantId,
  name: '夏浩兴',
  gender: '男',
  hospitalNo: '1000001',
  totalExpense: 15432.50
});

// 费用数据
const expenseData = ref({
  drugTotal: 4243.80,
  drugRatio: 85,
  treatmentTotal: 2712.5,
  treatmentRatio: 70,
  serviceTotal: 5522.3,
  serviceRatio: 60,
  otherTotal: 2953.9,
  otherRatio: 50
});

// 费用明细
const expenseDetails = ref([
  { category: '药品费用', name: '阿莫西林', price: 35.5, quantity: 3, amount: 106.5 },
  { category: '药品费用', name: '头孢克洛', price: 58.8, quantity: 2, amount: 117.6 },
  { category: '药品费用', name: '布洛芬', price: 15.5, quantity: 1, amount: 15.5 },
  { category: '诊疗费用', name: '血常规检查', price: 45.0, quantity: 1, amount: 45.0 },
  { category: '诊疗费用', name: 'B超检查', price: 120.0, quantity: 1, amount: 120.0 },
  { category: '诊疗费用', name: 'CT检查', price: 350.0, quantity: 1, amount: 350.0 },
  { category: '服务费用', name: '住院床位费', price: 180.0, quantity: 7, amount: 1260.0 },
  { category: '服务费用', name: '护理费', price: 80.0, quantity: 7, amount: 560.0 },
  { category: '其他费用', name: '一次性医疗用品', price: 120.0, quantity: 1, amount: 120.0 }
]);

// 报销信息
const reimbursementInfo = ref([
  { level: '一级', limit: 10000, deductible: 1000, reimbursementRatio: 80 },
  { level: '二级', limit: 50000, deductible: 5000, reimbursementRatio: 70 },
  { level: '三级', limit: 100000, deductible: 10000, reimbursementRatio: 60 },
  { level: '四级', limit: 300000, deductible: 20000, reimbursementRatio: 50 }
]);

// 计算报销金额
const calculatedReimbursement = computed(() => {
  // 简单计算，实际应根据报销规则计算
  return participantInfo.value.totalExpense * 0.75;
});

// 格式化货币
const formatCurrency = (value) => {
  return `¥${value.toFixed(2)}`;
};

// 处理报销申请
const handleApplyReimbursement = (level) => {
  ElMessage.success(`已申请${level.level}报销，报销比例${level.reimbursementRatio}%`);
};

// 处理提交
const handleSubmit = () => {
  ElMessage.success('保存成功');
};
</script>

<style scoped>
.expense-reimbursement-container {
  padding: 20px;
}

.reimbursement-panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

.panel-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.basic-info-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  margin-right: 30px;
  margin-bottom: 10px;
}

.label {
  color: #606266;
  margin-right: 5px;
}

.value {
  font-weight: 500;
}

.highlight {
  color: #f56c6c;
  font-weight: bold;
}

.expense-categories {
  margin-bottom: 20px;
}

.category-card {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
  height: 100%;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.category-icon {
  font-size: 20px;
  margin-right: 8px;
}

.category-title {
  font-weight: 500;
}

.category-amount {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.category-detail {
  font-size: 14px;
  color: #606266;
}

.section-header {
  margin: 20px 0 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.summary-section {
  margin-top: 20px;
  text-align: right;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.summary-row {
  margin-bottom: 10px;
}

.summary-row:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-weight: 500;
  margin-right: 10px;
}

.summary-value {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}
</style> 